In an earlier lesson, we briefly touched on node integration, a very important concept to fully understand.
So in this lesson, we'll see how to use preload scripts to access no dossiers securely from a renderer
without node integration.
Now, basically setting node integration to true on a browser, Windows Web content is what allows us
to access node APIs and require statements directly inside of our renderer process.
But allowing a renderer process access to no dossier's means it also has full access to the user's file
system, which can pose a severe security risk when dealing with any untrusted or remote content inside
of a browser window.
Node integration being perfectly safe for apps that use static HTML files as its content like we do,
hence the explicit statement enabling it inside of Mendes's the real threat, as mentioned, coming
from remote content.
So let's say you're building an app that requires remote content and you can't enable node integration.
What exactly will happen to better demonstrate this?
Let's first add a couple of node API references in this main windows content indexed HTML.
I'll just log out some of the global node process objects values in a new paragraph, say, using Nokia's
writing the version in with a bit of JavaScript.
Document dot, right?
Process dot versions, dot note.
And electronic document dot right again.
Process versions, dot electron.
Process being the global notat process object, of course, something we've covered in a previous lesson
and very importantly, only being available as we have node integration enabled for this browser window
or renderer.
Check this with node integration still enabled.
I'll save.
Reload the app and we see those versions printed, so we know this window has access to the notorious
API, but as mentioned, this isn't always going to be possible for every app back over in mind.
Yes, I'll set note integration to false on main window.
False being the default anyway.
Save.
And the Reloj, with a bunch of errors, process is no longer defined and same for require both no duchies
integration's.
What Electronic allows us to do then is run some code on the Windows Web contents before loading.
We do this by means of a preload script.
We can set the location to the script on the web contents, preload, setting it to underscore underscore
dir name.
So this directory slash preload duchesse create that preload file.
And if we look back at those errors, we can solve them by providing the missing variables in this case,
process or process DOT versions being the versions for node and electron, easiest being to set these
values on the global window object of the Web contents.
So instead of accessing them on the global node process object change, there's two versions, node
and versions.
Dot Electron also get rid of this.
Require a statement as we can't really provide this.
Define those versions in preload dodges sitting on the window object versions equal to an object with
properties, node being process dot versions, dot node.
Remember, we have access to node in this preload script and versions dot electron being equal to process
dot versions dot electron.
So to recap, we're now executing preload doges on the main Windows Web contents, allowing it to access
the context of that web content and in preload dodgiest.
We are setting both node and electron's versions from the node process object which we're printing here
as before.
Save all of this.
And our versions are back with no more errors.
We've added these two values now, but we can also provide limited and safe access to notorious APIs
using this preload script.
For example, let's say we want to allow our app to write some content to the user's machine.
I'll create a text area to input the content to be saved.
Give this an idea of content.
Brake and a button to trigger the right.
I'd save.
With a label of safe content, check this, reload the window and there what we want now is to type
something into this text area, click save and have that content written to a plain text file on my
computer.
I'll start with the save buttons.
Click Handler const save text equals a function in which we can go ahead and get the content of the
text area.
Select that text area code document.
Get element by idea.
Content accessing its value, then this being the bed will have to provide from the preload script call
right to file this text, also not forgetting to set an unclick property on this button on click save
text.
Right, that should be all for the renderer.
So over to preload dodges and the first thing we'll do here is require the node file system module.
Keep in mind that even with node integration disabled, the script runs prior to that and still has
access to the entire notorious API and all the Renderer modules assigning to FS require FS.
I'll write the text in the function we're about to create to my desktop.
So set that path desktop path for which you'd get the value from the main process using a simple IPSI
message.
But I'll just hardcoded for now, as we've already seen how to do that.
Slash uses slash rifle use slash desktop.
The final step being to create this global right to file function assigned to window dot, right to
file a function with a single argument of text writing that text to a file with fs dot right file first
argument being the path or file name desktop path slash up dot.
Text the data to be written being this text argument and lastly have console dialog handle any errors.
So we're essentially injecting this function into the main windows web contents.
Save that reloads.
I'll type into some content from my app.
And abductee appears on my desktop with that exact content, preload is a very important concept and
one you should really make sure you understand as it will really help you create much more secure apps.